<script>
import { mapState } from 'vuex';

export default {
  name: 'roleForm',
  data() {
    return {
      formData: {
        roleName: '',
        remark: '',
        perms: [],
      },
    };
  },
  methods: {
    /* 获取所有权限列表的回调函数 */
    async fetchAllPermision() {
      try {
        await this.$store.dispatch('roleStore/fetchAllPermision');
      } catch (error) {
        this.$message.error(error.message);
      }
    },

    /* 查询当前角色所拥有权限列表的回调函数 */
    async findRolePermision() {
      try {
        const data = await this.$store.dispatch('roleStore/findRolePermision', this.$route.query.roleId);
        this.formData.roleName = data.roleName;
        this.formData.remark = data.remark;
        data.perms.forEach((item, index) => {
          this.$refs.treeRef[index].setCheckedKeys(item);
        });
      } catch (error) {
        this.$message.error(error.message);
      }
    },

    /* 添加或者编辑角色 */
    async handleSubmit() {
      this.$refs.treeRef.forEach(tree => {
        this.formData.perms.push(tree.getCheckedKeys());
      });
      if (this.flag === 'add') {
        try {
          await this.$store.dispatch('roleStore/addRoleAction', this.formData);
          this.$router.back();
          this.$message.success('添加角色成功');
        } catch (error) {
          this.$message.error(error.message);
        }
      } else {
        try {
          const data = { roleName: this.formData.roleName, remark: this.formData.remark, perms: this.formData.perms, roleId: this.$route.query.roleId };
          await this.$store.dispatch('roleStore/editRoleAction', data);
          this.$router.back();
          this.$message.success('编辑角色成功');
        } catch (error) {
          this.$message.error(error.message);
        }
      }
    },

  },
  mounted() {
    this.fetchAllPermision();
    if (this.flag === 'edit') {
      this.findRolePermision();
    }
  },
  computed: {
    flag() {
      return this.$route.query.flag;
    },
    ...mapState('roleStore', ['allPermision']),
  },
};
</script>

<template>
  <div class="role-form">
    <el-card>
      <el-form inline size="small" :model="formData">
        <el-form-item label="角色名称">
          <el-input placeholder="请输入角色名称" v-model="formData.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input placeholder="请输入角色的描述" v-model="formData.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" icon="el-icon-plus" @click="handleSubmit">确定</el-button>
          <el-button type="primary" size="small"  @click="$router.back()">返回</el-button>

        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <div class="permissionList">
        <div class="permissionItem" v-for="(item,index) in allPermision" :key="index">
          <div class="title">{{ item.title }}</div>
          <el-tree ref="treeRef" :data="item.children" :props="{label: 'title'}" show-checkbox :expand-on-click-node="false" node-key="id"></el-tree>
        </div>
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.role-form {
  padding: 20px;

  .el-card {
    margin-top: 10px;
  }

  .title {
    background-color: #e4e7ec;
    padding: 10px;
  }
}
</style>
